<template>
  <div class="goodslist">
    <van-dropdown-menu>
      <van-dropdown-item
        disabled
        v-model="value1"
        :options="option1"
        title="综合"
      />
      <van-dropdown-item
        @change="orderByPrice(value2)"
        title="价格"
        v-model="value2"
        :options="option2"
      />
      <van-dropdown-item
        @change="categoryByTag(value3)"
        title="分类"
        v-model="value3"
        :options="option3"
      />
    </van-dropdown-menu>
    <!-- {{ filterCategory }} -->
    <van-grid class="Goods" :border="false" :column-num="2">
      <van-grid-item
        @click="
          $router.push({ path: '/productDetail', query: { goodsID: item.id } })
        "
        v-for="item in goodsListData"
        :key="item.id"
      >
        <van-image :src="item.list_pic_url" />
        <p class="Goods-title">{{ item.name }}</p>
        <span class="Goods-price">{{ item.retail_price | formatPrice }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: 0,
      value2: "asc",
      value3: "a",
      option1: [{ text: "全部商品", value: 0 }],
      option2: [
        { text: "从高到低", value: "desc" },
        { text: "从低到高", value: "asc" },
      ],
      option3: [
        // { text: "全部", value: "a" },
        // { text: "居家", value: "b" },
      ],
    };
  },
  methods: {
    //根据价格排序
    orderByPrice(val) {
      this.$emit("orderByPrice", val);
    },
    //分类下拉框
    categoryByTag(val) {
      this.$emit("categoryByTag", val);
    },
  },

  props: ["goodsListData", "filterCategory"],
  watch: {
    //监听filterCategory，传入新数据的时候将数据处理好然后交给下拉框渲染
    filterCategory: {
      handler(newVal, oldVal) {
        let tempValue3 = null;
        let tempOption3 = newVal.map((item) => {
          if (item.checked) tempValue3 = item.id;
          return { text: item.name, value: item.id };
        });
        this.value3 = tempValue3;
        this.option3 = tempOption3;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.goodslist {
  .Goods {
    background-color: #fff;
    .Goods-title {
      text-align: center;
      line-height: 0.3rem;
      font-size: 0.16rem;
      width: 1.5rem;
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*不换行*/
      text-overflow: ellipsis; /*超出部分文字以...显示*/
    }
    .Goods-price {
      color: darkred;

      font-size: 0.16rem;
    }
  }
}
</style>
